<template>
  <page-view :title="title" subTitle="管理系统中的角色">

    <a-form slot="headerContent" layout="inline">
      <a-form-item>
        <a-input placeholder="角色名称" v-model="key" @change="handleSearchChange"/>
      </a-form-item>
    </a-form>

    <a-row slot="extra" class="status-list">
      <a-col :xs="24" :sm="24">
        <div class="text">角色数</div>
        <div class="heading">{{ total }}</div>
      </a-col>
    </a-row>

    <template slot="action">
      <a-button-group style="margin-right: 4px;">
        <a-popover title="提示" trigger="click">
          <template slot="content">
            <p>下面列出了系统中所有角色</p>
            <p>您可编辑角色的名称、数据权限</p>
            <p>删除角色时，如果有用户在使用该角色，则无法删除该角色</p>
          </template>
          <a-button>提示</a-button>
        </a-popover>
      </a-button-group>
      <a-button type="primary" @click="$router.push('/system/role-manage/create')">新增</a-button>
    </template>

    <a-card :bordered="false">
      <a-table
        rowKey="id"
        :columns="columns"
        :dataSource="list"
        :pagination="false">
        <span slot="dataScope" slot-scope="value,row">
          {{ dataScopeMap[value] || '-' }}
        </span>
        <span slot="updated" slot-scope="value,row">
          {{ row.updated | fromNow }}
        </span>
        <span slot="action" slot-scope="text, row, index">
          <a @click.prevent="handleClickEdit(row,index)">编辑</a>
          <a-divider type="vertical"/>
          <a-popconfirm title="是否要删除此行？" @confirm="handleClickDelete(row,index)">
            <a @click.stop>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </a-card>

  </page-view>
</template>

<script>

  import {mapGetters} from 'vuex'
  import {PageView} from '@/layouts'
  import {deleteRole, findRoles} from '@/api/role'

  const columns = [{
    title: '角色名',
    dataIndex: 'name',
    key: 'name'
  }, {
    title: '数据权限',
    dataIndex: 'dataScope',
    key: 'dataScope',
    scopedSlots: {customRender: 'dataScope'}
  }, {
    title: '更新时间',
    dataIndex: 'updated',
    key: 'updated',
    scopedSlots: {customRender: 'updated'}
  }, {
    title: '操作',
    key: 'action',
    scopedSlots: {customRender: 'action'}
  }]

  export default {

    components: {
      PageView,
    },

    data() {
      return {
        columns,
        key: '',
        list: [],
        total: 0
      }
    },

    computed: {
      ...mapGetters(['dataScopeMap']),
      title() {
        return this.$route.meta.title
      }
    },

    created() {
      this.queryData()
    },

    methods: {

      handleSearchChange() {
        this.queryData()
      },

      queryData() {
        findRoles(this.key).then(resp => {
          this.list = resp.result.list
          this.total = resp.result.list.length
        })
      },

      handleClickEdit(row, index) {
        this.$ls.set('role_edit_review_data', row)
        this.$router.push('/system/role-manage/edit')
      },

      handleClickDelete(row, index) {
        deleteRole(row.id).then(() => {
          this.list.splice(index, 1)
          this.total -= 1
          this.$message.warn('删除角色成功')
        })
      },

    }

  }
</script>

<style lang="less" scoped>
</style>
